<template>
  <div class="exercise-box" style="margin-top: 10px;">
    <div
      class="exercise-option-lis"
      style="margin-bottom: 5px;"
      v-for="(item,index) in answerList"
      :key="index"
    >
      <span
        style="line-height: 32px;display: inline-block;vertical-align: top;width:50px;margin-right: 5px"
      >填空{{index+1}}:</span>
      <a-textarea
        :disabled="mode == 'check'"
        v-model="item.Content"
        placeholder="请输入答案"
        style="width:calc(100% - 55px);"
        auto-size
        @blur="getChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      Alphabet: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      answerList: []
    };
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: 0
    },
    mode: {
      type: String,
      default: ''
    }
  },
  mounted() {
    this.num = 0;
    for (let i = 0; i < this.data.AnswerList.length; i++) {
      if (this.num < this.data.AnswerList[i].SortOrder + 1) {
        this.num = this.data.AnswerList[i].SortOrder + 1;
      }
    };
    var StuFillAnswer = '';
    if (this.data.StuAnswer) {
      StuFillAnswer = JSON.parse(this.data.StuAnswer);
    }
    if (StuFillAnswer) {
      this.answerList = StuFillAnswer;
    } else {
      for (let i = 0; i < this.num; i++) {
        let lis = { SortOrder: i, Content: '' };
        this.answerList.push(lis);
      }
    }
  },
  methods: {
    getChange() {
      this.data.StuFillAnswer = this.answerList;
      this.$parent.onChange(this.data, this.index);
    }
  }
};
</script>

<style>
</style>